<template>
    <div class="app-header">
        <div class="content">
            <div class="header-home">
                <div class="header-logo">
                    <div>
                        <img :src="logoImg"   />
                        <button @click="asideNavBtn('a')" class="btn btn-primary btn-circle" id="aaa"><i class="el-icon-c-daohanglist"></i></button>
                    </div>
                </div>
                <div class="header-nav">
                  <div class="hide-sm">
                    <ul >
                      <li>
                         <router-link to="home">首页</router-link>
                      </li>
                      <li>
                          <router-link to="course">课程</router-link>
                      </li>
                      <li>
                        <router-link to="skill">技能</router-link>
                      </li>
                      <li>
                        <router-link to="classes">班级</router-link>
                      </li>
                      <li>
                        <router-link to="community">社区</router-link>
                      </li>
                      <li>电商大赛</li>
                      <li>下载</li>
                    </ul>
                  </div>
                  <div class="header-title">
                    <h4>标题名称</h4>
                  </div>
                </div>
                <div class="header-info">
                  <div  ref="warning_list"  class="header-info-item header-info-email hide-sm">
                    <button class="btn btn-success btn-circle"><i class="el-icon-c-youjianxinxiicon"></i></button>
                  
                  </div>
                  <div class="header-info-item header-info-car hide-sm">
                    <button class="btn btn-info btn-circle"><i class="el-icon-c-tongzhi"></i></button>
                    <div>
                      
                    </div>
                  </div>
                   <div class="header-info-item header-info-add">
                    <button   @click="addClick" class="btn btn-warning btn-circle"><i class="el-icon-c-tianjia"></i></button>
                    <div  v-if="add">
                       <!-- <warning-list></warning-list> -->
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div> 
</template>
<script>
//vuex
import { mapState, mapGetters } from "vuex";
// import store from "../../../store/store";
//components
// import WarningList from "./WarningList";
export default {
  name: "AppHeader",
  computed: mapGetters({
    // aside_nav_show: "getIsShow"
  }),
  components: {
    // WarningList
  },
  data() {
    return {
      logoImg: "", // require("../../assets/img/global/logo.png"),
      email: true,
      waring: false,
      add: false
    };
  },
  methods: {
    asideNavBtn: function(e) {
      // this.$store.commit("asideTargit", !this.aside_nav_show);
    },
    addClick: function() {
      this.add = !this.add;
      // console.log("this.add=", this.add);
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../assets/scss/components/global/AppHeader.scss";
.left-nav {
  position: absolute;
  top: 20vh;
  left: -2%;
  width: 3rem;
  height: auto;
  transition: transform 300ms ease-out;
  -webkit-transition: transform 300ms ease-out;
  @media (min-width: $screen-sm) {
    opacity: 0;
    display: none;
  }
}
</style>